<!-- 打卡记录 -->
<template>
  <div class="eval_main">
    <div class="eval_head_icon">
      <dl class="eval_icon_left">
        <dd><img src="@/assets/studen/images/calendar_left.png" /></dd>
        <dd><img src="@/assets/studen/images/calendar_left.png" /></dd>
      </dl>
      <dl class="eval_icon_right">
        <dd><img src="@/assets/studen/images/calendar_right.png" /></dd>
        <dd><img src="@/assets/studen/images/calendar_right.png" /></dd>
      </dl>
    </div>

    <div class="eval_date_">
      <div class="eval_date">
        <el-calendar ref="calendar" class="calendar">
          <template #header="{ date }">
            <el-button-group>
              <el-button size="small" @click="selectDate('prev-year')" :icon="useRenderIcon(DArrowLeft)" />
              <el-button size="small" @click="selectDate('prev-month')" :icon="useRenderIcon(ArrowLeftBold)" />
              <el-button size="small" @click="selectDate('today')">{{ date }}</el-button>
              <!-- <span></span> -->
              <el-button size="small" @click="selectDate('next-month')" :icon="useRenderIcon(ArrowRightBold)" />
              <el-button size="small" @click="selectDate('next-year')" :icon="useRenderIcon(DArrowRight)" />
            </el-button-group>
          </template>
          <template #date-cell="{ data }">
            <p ref="days_bag" class="days_text">{{ data.day.split('-').slice(2).join('-') }}</p>
            <p v-for="(item, index) in mydaylist" :key="index" :class="item == data.day ? 'days__bag' : ''"></p>
          </template>
        </el-calendar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Select from "@iconify-icons/ep/select";
import ArrowLeftBold from "@iconify-icons/ep/arrow-left-bold";
import ArrowRightBold from "@iconify-icons/ep/arrow-right-bold";
import DArrowLeft from "@iconify-icons/ep/d-arrow-left";
import DArrowRight from "@iconify-icons/ep/d-arrow-right";
import { ref, onMounted, nextTick } from 'vue';
const days_bag = ref()
const calendar = ref();
const selectDate = (val: string) => {
  calendar.value.selectDate(val)
}

defineProps({
  mydaylist: {
    type: Array,
    default: () => []
  }
})

</script>

<style lang="scss" scoped>
.eval_main {
  height: calc(100% - 55px);
  width: 98%;
  // overflow: hidden;
  background: white;
  border-radius: 10px;
  padding: 5px;
  margin: 5px auto;
  box-shadow: 0 0 4px 1px #8ab9f6;
  position: relative;

  .eval_head_icon {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;

    dl {
      display: flex;
      position: absolute;
      top: -9px;
    }

    .eval_icon_left {
      left: 15%;
    }

    .eval_icon_right {
      right: 15%;
    }
  }

  .eval_date_,
  .eval_date {
    height: 100%;
  }

  :deep(.el-calendar) {
    height: 100%;
  }

  :deep(.el-calendar__header) {
    padding: 5px 40px;
  }

  :deep(.el-calendar__body) {
    height: calc(100% - 40px);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  :deep(.el-calendar-table) {
    .el-calendar-day {
      // height: fit-content;
      border-radius: 50px;
      height: 50px;
      width: 50px;
      text-align: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px auto;
    }
  }

  .days_text {
    position: relative;
    z-index: 3;
  }

  .days__bag {
    background-color: #0BCD8C;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: auto;
    right: 0;
    border-radius: 50%;
  }
}

:deep(.el-calendar-table thead th) {
  color: #000;
  font-weight: 900;
}

:deep(.el-calendar-table td.is-selected) {
  background-color: transparent;
}

:deep(.el-calendar-table .el-calendar-day:hover) {
  background-color: #0bcd8c88;
}

:deep(.el-calendar__header) {
  .el-button-group {
    margin: 0 auto;

    .el-button {
      border: none;
      background-color: transparent;
      font-size: 16px;
    }
  }
}

:deep(.el-calendar-table td.is-today) {
  color: white;
}

::-webkit-scrollbar {
  width: 1px;
}

@media screen and (max-width: 1600px) {
  .eval_main {
    :deep(.el-calendar-table) {
      .el-calendar-day {
        height: 40px;
        width: 40px;
      }
    }
  }
}
</style>

